<template>
  <div class="form-container">
    <h3 class="custom-title">基本信息</h3>
    <van-form @submit="onSubmit">
      <!-- 证件号码 -->
      <van-field
        v-model="id_num"
        :disabled="mode === 1"
        name="证件号码"
        label="证件号码"
        placeholder="请输入证件号码"
        :rules="[{ required: true, message: '请填写证件号码' }]"
      />
      <!-- 证件类型 -->
      <van-field
        readonly
        clickable
        name="picker"
        :value="document_type"
        label="证件类型"
        placeholder="点击选择证件类型"
        @click="document_type_picker = true"
      />
      <van-popup v-model="document_type_picker" position="bottom">
        <van-picker
          show-toolbar
          :columns="document_type_columns"
          @cancel="document_type_picker = false"
          @confirm="onConfirm"
        />
      </van-popup>
      <!-- 姓名 -->
      <van-field
        v-model="username"
        name="姓名"
        label="姓名"
        placeholder="请输入姓名"
        :rules="[{ required: true, message: '请填写姓名' }]"
      />
      <!-- 性别 -->
      <van-field
        readonly
        clickable
        name="picker"
        :value="gender"
        label="性别"
        placeholder="请选择性别"
        @click="gender_picker = true"
      />
      <van-popup v-model="gender_picker" position="bottom">
        <van-picker
          show-toolbar
          :columns="gender_columns"
          @confirm="onConfirm"
          @cancel="gender_picker = false"
        />
      </van-popup>
      <!-- 出生日期 -->
      <van-field
        readonly
        clickable
        name="datetimePicker"
        :value="born_date"
        label="出生日期"
        placeholder="点击选择出生日期"
        @click="born_date_picker = true"
      />
      <van-popup v-model="born_date_picker" position="bottom">
        <van-datetime-picker
          type="date"
          @confirm="
            (value) =>
              onConfirm({
                value,
                type: 'date',
              })
          "
          @cancel="born_date_picker = false"
        />
      </van-popup>
      <van-field name="uploader" label="文件上传">
        <template #input>
          <van-uploader v-model="uploader" />
        </template>
      </van-field>
      <!-- 提交按钮 -->
      <div style="margin: 16px">
        <van-button round block type="info" native-type="submit"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>

<script>
import moment from "moment";
export default {
  name: "FormDetials",
  props: {
    detials: {
      type: Object,
      default: () => {},
    },
    mode: {
      type: Number,
      default: () => 0,
    },
  },
  watch: {
    detials: {
      handler(values) {
        console.log(values);
        console.log("watch ok");
      },
      immediate: true,
      deep: true,
    },
  },
  data() {
    return {
      // 引入moment时间格式化插件
      moment,
      // 证件号码
      id_num: "",
      // 姓名
      username: "",
      // 证件类型
      document_type: "",
      // 性别
      gender: "",
      // 出生日期
      born_date: "",
      // 是否显示证件类型选择器
      document_type_picker: false,
      // 是否显示性别选择器
      gender_picker: false,
      // 是否显示出生日期选择器
      born_date_picker: false,
      // 性别选项
      gender_columns: [
        {
          text: "未知",
          type: "gender",
        },
        {
          text: "男",
          type: "gender",
        },
        {
          text: "女",
          type: "gender",
        },
        {
          text: "未说明",
          type: "gender",
        },
      ],
      // 证件类型选项
      document_type_columns: [
        {
          text: "身份证",
          type: "document_type",
        },
        {
          text: "居住证",
          type: "document_type",
        },
        {
          text: "签证",
          type: "document_type",
        },
        {
          text: "护照",
          type: "document_type",
        },
        {
          text: "军人证",
          type: "document_type",
        },
        {
          text: "港澳通行证",
          type: "document_type",
        },
      ],
      uploader: [{ url: "https://img01.yzcdn.cn/vant/leaf.jpg" }],
    };
  },
  mounted() {},
  methods: {
    onSubmit(values) {
      console.log("submit", values);
    },
    // 所有选择器改变事件都在这里处理
    onConfirm(values) {
      console.log(values);
      // type 是每个 columns 里定义的，用于区分当前触发的是什么 select 事件
      // text 是选择器选择的值（注意：时间、日期选择器没有这个值）
      // value 是选择器选择的值（时间、日期选择器点击“确认”，获取到的值）
      const { type, text, value } = values;
      switch (type) {
        // 如果是证件类型选择器改变
        case "document_type":
          this.document_type = text;
          this.document_type_picker = false;
          break;
        // 如果是性别选择器改变
        case "gender":
          this.gender = text;
          this.gender_picker = false;
          break;
        case "date":
          this.born_date = moment(value).format("YYYY-MM-DD");
          this.born_date_picker = false;
          break;
        // 如果是时间、日期选择器
      }
    },
  },
};
</script>

<style></style>
